<template>
	<view class="bg">
		<uni-grid :column="3" highlight class="uni-grid-border">
			
			<uni-grid-item v-for="item in brandData" :key="item.bid">
				<uni-badge :offset="[20,28]" absolute="rightTop" :maxNum=10000 :text="item.popularity"></uni-badge>
				<view @click="jumpToList(item)">
					
					<image class="brandImg" :src="$url.baseURL+item.logo" mode="widthFix"></image>
					<text class="h3">{{item.bname}}</text>
					
					</view>
			</uni-grid-item>
		
		</uni-grid>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				brandData:[],
			};
		},
		methods:{
			jumpToList(item){
				console.log(item);
				uni.navigateTo({
					url:`/pages/product-list/product-list?bname=${item.bname}&kw=${item.keywords}`
				})
			},
		},
		onLoad() {
			let url = this.$url.brands
			uni.showLoading({
				title:"数据加载中...",
			})
			uni.request({
				url:url,
				success:(res)=>{
					this.brandData = res.data
					// console.log(this.brandData);
				},
				fail: (err) => {
					console.log(err);
				},
				complete: () => {
					uni.hideLoading()
				}
			
			})
		},
		
	}
</script>

<style lang="scss">
.h3{
	margin-bottom: 40rpx;
	display:block;
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
}
.brandImg{
	padding: 15rpx;
	width: 100%;
	margin-top: 60rpx;
}
.uni-grid-border{
	border-left-width: 0.5px;
	border-right-width: 0.5px;
	border-top-width: 0.5px;
	border-bottom-width: 0.5px;
	border: 2rpx solid #D2D2D2;
}
.bg{
	background-color: #FFFFFF;
}
</style>
